<template>
  <div>
    <!-- 背景  -->
    <div class="bg">
    <van-nav-bar
    left-text="返回"
    style="background-image: linear-gradient(90deg, #7579ff, #bf73ff);
    height:40px;"
    left-arrow
    @click-left="onClickLeft"/>
    </div>
    <!-- 用户卡片 -->
    <div class="user">
      <div class="photo">
        <!-- 用户头像 -->
        <img :src="userInfo.userFace" alt="" />
      </div>
      <!-- 用户名 -->
      <p class="name">{{userInfo.username}}</p>
      <p class="flag">可可喜欢家，家喜欢干净</p>
      <p class="status">{{userInfo.certificationStatus}}</p>
    </div>

    <!-- 用户个人信息展示 -->
    <div class="dateils">
      <p>手机号：{{userInfo.telephone}}</p>
      <p>身份证号：{{userInfo.idCard}}</p>
      <p>银行卡号：{{userInfo.bankCard}}</p>
      <div>身份证正面照：<img alt="" width="300px" height="200px" :src="userInfo.idcardPhotoPositive" /></div>
      <div>身份证反面照：<img alt="" width="300px" height="200px" :src="userInfo.idcardPhotoNegative" /></div>
      <div style="margin-bottom: 2em">
        银行卡照片：<img alt="" width="300px" height="200px" :src="userInfo.bankCardPhoto" />
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions,mapMutations,mapState} from 'vuex'
export default {
  data() {
    return {
        //用户信息数组
            UserData:{},
    };
  },

  computed: {
      //通过vuex 拿到登录保存的用户信息
        ...mapState('user',['userInfo']),
  },

  methods: {
    //点击返回到上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
  },

  created() {},
};
</script>

<style lang="less">
.bg {
  height: 180px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  .van-nav-bar__text{
    color: #fff;
}
.van-icon{
    color: #fff;
}
}
.user {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
}
.user .photo img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #bf73ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user .name {
  width: 50%;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 3.5em;
  text-align: center;
}
.user .flag {
  width: 50%;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 0.5em;
  text-align: center;
  font-size: 12px;
  color: #7579ff;
}
.user .status {
  width: 50%;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 1em;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.dateils {
  margin-top: 7em;
  padding: 0 2em;
  font-size: 14px;
  color: #333;
  text-align: center;
}

</style>